<script setup lang="ts">
import { computed, ref } from "vue";
import Portservice from "@/apis";
import { genderDict } from "@/dicts";
import { $singleMsg } from "xt-public/plugins/utils/element.ts";
import type Typings from "@/typings";

const emit = defineEmits(["confirm"]);

const visible = ref<boolean>(false);
const pageType = ref<Typings.User.pageType>("check");

// 查看模式
const isCheck = computed(() => pageType.value === "check");
// 新增模式
const isCreate = computed(() => pageType.value === "create");

const form = ref();
const formData = ref<Partial<Typings.User.props>>({
  id: "",
  account: "",
  password: "",
  name: "",
  gender: "",
  // roleId: "",
  desc: "",
});
const formJson = computed<Typings.XtPublic.DynamicForm.formJson[]>(() => {
  return [
    {
      el: "input",
      span: 12,
      prop: "account",
      label: "账号",
      placeholder: "请输入账号",
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },
    {
      el: "input",
      span: 12,
      prop: "name",
      label: "名称",
      placeholder: "请输入名称",
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },
    {
      el: "input",
      span: 12,
      prop: "password",
      label: "密码",
      placeholder: "请输入密码",
      type: "password",
      "show-password": true,
      autocomplete: "new-password",
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },
    {
      el: "select",
      span: 12,
      prop: "gender",
      label: "性别",
      placeholder: "请选择性别",
      options: genderDict,
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },
    // {
    //   el: "select",
    //   span: 12,
    //   prop: "roleId",
    //   label: "角色",
    //   placeholder: "请选择角色",
    //   options: [],
    //   rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    // },
    {
      el: "textarea",
      span: 24,
      prop: "desc",
      label: "简述",
      placeholder: "请输入简述",
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },

    {
      el: "slot",
      span: 24,
      prop: "avatar",
      label: "头像",
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },
  ];
});

// 控制器
const controller = {
  open(
    scope: Typings.User.scope | null,
    type: Typings.User.pageType = "check"
  ) {
    visible.value = true;
    pageType.value = type;
    if (!scope) return;
    formData.value = scope.row;
  },

  reset() {
    formData.value = {
      id: "",
      account: "",
      password: "",
      name: "",
      gender: "",
      roleId: "",
      desc: "",
      avatar: "",
    };
    pageType.value = "check";
    form.value.getInstance().resetFields();
    form.value.getInstance().clearValidate();
  },

  close() {
    visible.value = false;
    controller.reset();
  },

  async save() {
    form.value.getInstance().clearValidate();
    await form.value.getInstance().validate();
    const params: Partial<Typings.User.props> = {
      account: formData.value.account,
      password: formData.value.password,
      name: formData.value.name,
      gender: formData.value.gender,
      roleId: formData.value.roleId,
      desc: formData.value.desc,
      avatar: formData.value.avatar,
    };
    if (!isCreate.value) {
      params.id = formData.value.id;
    }
    const apiPath = isCreate.value ? "userAddApi" : "userUpdateApi";
    await Portservice[apiPath](params);
    $singleMsg({
      message: `${isCreate.value ? "添加" : "保存"}成功`,
    });
    controller.close();
    emit("confirm");
  },
};

defineExpose({
  open: controller.open,
});
</script>

<template>
  <xt-drawer
    title="用户信息"
    v-model="visible"
    :before-close="controller.close"
  >
    <xt-dynamic-form
      ref="form"
      :label-width="108"
      :disabled="isCheck"
      :data="formData"
      :formJson="formJson"
    >
      <template #avatar>
        <xt-upload-avatar v-model:url="formData.avatar" />
      </template>
    </xt-dynamic-form>

    <template #footer>
      <div class="w-full center">
        <xt-button @click="controller.save" v-if="!isCheck">确 定</xt-button>
        <xt-button type="default" @click="controller.close">取 消</xt-button>
      </div>
    </template>
  </xt-drawer>
</template>
